import {ModalForm, ProFormRadio, ProFormText, ProFormTextArea,} from '@ant-design/pro-components';
import React from 'react';

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.Channel) => void;
  onSubmit: (values: API.Channel) => Promise<void>;
  updateModalOpen: boolean;
  values: Partial<API.Channel>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  return (     <ModalForm
      title='新建'
      width="400px"
      open={props.updateModalOpen}
      onFinish={props.onSubmit}
      modalProps={{destroyOnClose:true,onCancel:() => props.onCancel()}}
    >
      <ProFormText initialValue={props.values.id} hidden={true} name='id'/>

      <ProFormText
        initialValue={props.values?.name}
        rules={[
          {
            required: true,
            message: 'channel名称不能为空',
            max: 15,
            min: 4
          },
        ]}
        width="md"
        label="Channel名称"
        name="name"
      />
      <ProFormRadio.Group
        initialValue={props.values?.parameters?.syncConsistency || 'BASE'}
        name={["parameters","syncConsistency"]}
        label="同步一致性"
        radioType="radio"
        options={[
          {
            label: '基于数据库反查',
            value: 'MEDIA',
          },
          {
            label: '基于当前日志变更',
            value: 'BASE',
          },
        ]}/>
      <ProFormRadio.Group
        name={["parameters","syncMode"]}
        label="同步模式"
        radioType="radio"
        initialValue={props.values?.parameters?.syncMode || 'FIELD'}
        options={[
          {
            label: '行记录模式',
            value: 'ROW',
          },
          {
            label: '列记录模式',
            value: 'FIELD',
          },
        ]}
      />
      <ProFormRadio.Group
        name={["parameters","enableRemedy"]}
        label="是否开启数据一致性"
        radioType="radio"
        initialValue={props.values?.parameters?.enableRemedy || 'false'}
        options={[
          {
            label: '是 ',
            value: 'true',
          },
          {
            label: '否',
            value: 'false',
          },
        ]}/>
      <ProFormTextArea width="md" name="desc" label="描述" initialValue={props.values.description}/>
    </ModalForm>
  );
};

export default UpdateForm;
